<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>购物列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<style>
			.mui-icon-left-nav {
			color: #60C68B;
		}
		.mui-content{
			background: #fff;
		}
		
		[v-cloak] {
			display: none;
		}
		</style>
		<script src="../../js/mui.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vue-resource.js"></script>
	</head>

	<body>
		<div id="app" class="wifi_app" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">一键上网</h1>
			</header>
			<div class="mui-content">


			</div>
		</div>



		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: ".wifi_app", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次
						callback: function() {
							window.location.reload();

						} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});
			mui.plusReady(function() {
				var app = new Vue({
					el: "#app",
					data: {
						isNetwork: null,
					},
					methods: {

					},
					created() {
						if(plus.storage.getItem('isNetwork')==null){
							this.isNetwork = false;
							console.log(this.isNetwork);
						}
						else{
							this.isNetwork = plus.storage.getItem('isNetwork');
							console.log(this.isNetwork);
						}
						
					},
					watch: {
						isNetwork(newVal,oldVal){
							if (newVal) {
								setTimeout(function() {
									plus.webview.currentWebview().close();  
								}, 5000);
							}
							else{
								mui.toast("暂无网络哈哈");
								console.log("暂无网络哈哈");
							}
						}
// 						isNetwork: {
// 							
// 							handler(newVal,oldnew) {
// 								console.log(oldnew);
// 								console.log(newVal);
// 								return;
// 								if (newVal) {
// 									setTimeout(function() {
// 										plus.webview.currentWebview().close();  
// 									}, 5000);
// 								}
// 								else{
// 									console.log("暂无网络哈哈");
// 									mui.toast("暂无网络哈哈")
// 								}
// 							},
// 							deep: true,
// 							immediate: true,
// 
// 						},
						
					}
				})

				function createList() {
					var currentWindow = plus.webview.currentWebview(),
						//地址 ， id名:
						wsub = plus.webview.create('https://fanyi.baidu.com/', 'baidu', {
							top: '45px',
							bottom: '0',
							width: '100%',
							position: 'fixed',
							scrollIndicator: 'none',
							zindex: '11',
							background: 'transparent'
						});
					currentWindow.append(wsub);
				}
				createList();

				
				document.addEventListener("netchange", function() {
					var nt = plus.networkinfo.getCurrentType();
					switch (nt) {
						case plus.networkinfo.CONNECTION_ETHERNET:
						case plus.networkinfo.CONNECTION_WIFI:
							plus.storage.setItem('network-status', 'true');
							mui.toast('您已切换至无线网络～');
							
							plus.storage.setItem('isNetwork', 'true');
							app.isNetwork = plus.storage.getItem('isNetwork');
							console.log(app.isNetwork);
							
							break;
						case plus.networkinfo.CONNECTION_CELL2G:
						case plus.networkinfo.CONNECTION_CELL3G:
						case plus.networkinfo.CONNECTION_CELL4G:
							plus.storage.setItem('network-status', 'true');
							mui.toast('您已切换至移动网络～');
							
							
							plus.storage.setItem('isNetwork', 'true');
							app.isNetwork = plus.storage.getItem('isNetwork');
							console.log(app.isNetwork);
							
							break;
						default:
							plus.storage.setItem('network-status', 'false');
							mui.toast('您已关闭网络～');
							
							plus.storage.setItem('isNetwork', 'false');
							app.isNetwork = plus.storage.getItem('isNetwork');
							console.log(app.isNetwork);
							break;
					};
				}, false);

			});
		</script>
	</body>

</html>
